<template>
	<view class="app">
		<!-- logo -->
		<view class="logo">
			<image src="../../../static/img/register/logo.png" mode=""></image>
		</view>
		<!-- 登录 -->
		<view class="conteng">
			<view class="loginTip">注册</view>
			<view class="loginInput">
				<view class="InputText">
					<image src="../../../static/img/register/register_tele.png" mode=""></image>
					<input type="text" v-model="phone" value="" placeholder-class="grayColor" placeholder="请输入手机号" />
				</view>
				<view class="code InputText">
					<image src="../../../static/img/register/verification_code.png" mode=""></image>
					<input type="text" value="" v-model="code" placeholder="请输入验证码" placeholder-class="grayColor" />
					<text class="separation">|</text>
					<text class="verificationCode" :class="getCodeFlag && 'grayColor' " @click="getCode">{{CodeText}}</text>
				</view>
				<view class="InputText">
					<image src="../../../static/img/register/passwordIcon.png" mode=""></image>
					<input type="password" v-model="password" value="" placeholder-class="grayColor" placeholder="请输入密码" />
				</view>

			</view>
			<view class="por">
				<view class="agreement">
					<radio-group @change="setDataValue($event,'checkboxFlag')" class="">
						<label class="radioTip">
							<radio value="1" style="transform:scale(0.6)" />我已阅读并同意</label>
					</radio-group>
					<view class="registration" @click="navRouter('/pages/register/login/agreement')">《注册协议》</view>
				</view>
				<!-- <view class="cjeckBoxTip">
					<text v-if="checkBoxText">请勾选“阅读并同意注册协议”</text>
				</view> -->
			</view>
			<button class="registerButton" type="default" @tap="goidentity">注册</button>
		</view>


		<view class="goregister">
			<text>已有账号</text>
			<text @click="reLaunch('/pages/register/login/login')">返回登录</text>
		</view>
	</view>
</template>

<script scoped>
	import login from "@/serve/api/login.js";
	import toMaintain from "@/serve/api/toMaintain.js"
	export default {
		data() {
			return {
				phone: "",
				code: "",
				getCodeFlag: false,
				CodeText: "获取验证码",
				checkboxFlag: "", // 是否勾选
				// checkBoxText:"",//是否提示
				password: "",
			}
		},
		onLoad() {

		},
		methods: {
			
			async goidentity() {
				console.log(this.password.length)
				if (!this.checkboxFlag) {
					this.tip("请勾选阅读并同意注册协议")
					return
				} else if (this.isEmpty(this.phone) || !this.checkPhone(this.phone)) {
					this.tip("请输入正确手机号")
					return
				} else if (this.isEmpty(this.code)) {
					this.tip("请输入验证码")
					return
				} else if (this.isEmpty(this.password) || (this.password.length < 6 || this.password.length > 20) ) {
					this.tip("请输入6 ~ 20位密码")
					return
				}
				const res = await login.register({
					phoneNumber: this.phone,
					code: this.code,
					password:this.password
				});
				if (res) {
					this.navRouter("/pages/register/login/login")
				}


			},

			// 验证码
			async getCode() {
				let that = this;
				let timer = null;
				if (!this.getCodeFlag) {
					if (this.isEmpty(this.phone) || !this.checkPhone(this.phone)) {
						this.tip("请输入正确手机号")
						return
					}
					const res = await login.sendPhoneCode({
						phoneNumber: this.phone
					})
					if (res) {
						this.tip("发送成功")
						this.getCodeFlag = true;
						if (!timer) {
							let timeNum = 60;
							timer = setInterval(function() {
								timeNum--;
								if (timeNum == 0) {
									clearInterval(timer)
									that.getCodeFlag = false;
									timeNum = 60;
									that.CodeText = `重新获取`
								} else {
									that.CodeText = `重新获取(${timeNum}s)`
								}
							}, 1000)
						}
					}
				}
			},



		}
	}
</script>

<style scoped>
	@import url("@/static/css/login.css");
</style>
